;(function ($, window, document, undefined) {
  var Magnifier = function (elem) {
    var self = this;
    this.$elem = elem;
    console.log(this.$elem)
    this.$smallBox = this.$elem.find('#smallWrap');
    this.$smallBox_pic = this.$smallBox.find('#smallImg');
    this.$smallBox_mask = this.$smallBox.find('.cursorPoint');
    this.$thumbnailBox = this.$elem.find('.goodsTabWrap');
    this.$thumbnailBox_prev = this.$thumbnailBox.find('.btn-prev');
    this.$thumbnailBox_next = this.$thumbnailBox.find('.btn-next');
    this.$thumbnailBox_wrapper = this.$thumbnailBox.find('.goodsListWrapUl');
    this.$thumbnailBox_item = this.$thumbnailBox.find('.goodsTabList');
    this.$thumbnailBox_pic = this.$thumbnailBox.find('img');
    this.$bigBox = this.$elem.find('.goodsBigImg');
    this.$bigBox_pic = this.$bigBox.find('img');
    this.$smallImg =$('#smallImg2')
  };

  Magnifier.prototype = {
    moveBigPic: function (x,y) {
      var scaleX = this.$smallBox_mask.position().left / (this.$smallBox.width() - this.$smallBox_mask.width());
      var scaleY = this.$smallBox_mask.position().top / (this.$smallBox.height() - this.$smallBox_mask.height());
      var scroll_l = scaleX * (this.$bigBox_pic.width() - this.$bigBox.width());
      var scroll_t = scaleY * (this.$bigBox_pic.height() - this.$bigBox.height());
        this.$bigBox_pic.css({
            left:-scroll_l,
            top:-scroll_t
        })
    },

    changeSrouce: function (index, cur_src) { 
      console.log(cur_src)
      $('#smallImg2').attr("src",cur_src);
      this.$bigBox_pic.attr('src', cur_src);
    },

    setMask: function () { 
      var mask_w = this.$smallBox.width() / (this.$bigBox_pic.width() / this.$bigBox.width());
      var mask_h = this.$smallBox.height() / (this.$bigBox_pic.height() / this.$bigBox.height());
      this.$smallBox_mask.css({width: mask_w, height: mask_h});
    },

    inital: function () { 
      var self = this;
      if(self.$thumbnailBox_item.length<=6){
          this.$thumbnailBox_next.click(function () {
                return
          });
          this.$thumbnailBox_prev.click(function () {
              return
          });
      }
      
      this.$thumbnailBox_next.click(function () {
        var ov_pic = self.$thumbnailBox_item.length - 6;
        var ov_dis = ov_pic * 76;
        if (ov_pic > 0) {
          self.$thumbnailBox_wrapper.animate({marginLeft: -ov_dis});
        }
      });
      this.$thumbnailBox_prev.click(function () {
        self.$thumbnailBox_wrapper.animate({marginLeft: 0});
      });

      this.$thumbnailBox_item.mouseover(function () {
        var cur_src = $(this).find('img').attr('src');
        self.$thumbnailBox_item.removeClass('active');
        $(this).addClass('active');
        self.changeSrouce($(this).index(), cur_src);
      });
      // this.$smallBox_mask.on('click',function(e){
      //       $('#cursorPoint').on('mouseup',function (e) {
      //           e.stopPropagation();
      //             $('#hideArea').fadeIn(600);
      //         })
      //       $('.showImages').on('mouseup',function (e) {
      //           e.stopPropagation()
      //         })
      //     $('.closeHide').on('click',function (e) {
      //         e.stopPropagation();
      //         $('#hideArea').fadeOut(600);
      //     });
      //       $('.showList').each(function () {
      //         $(this).on('click',function (e) {
      //                 console.log($(this).index());
      //                 var src=$(this).find("img").attr("src")
      //                 $('.showImg').find('img').attr("src",src)
      //                 e.stopPropagation()
      //             })
      //         })
      //     $('#hideArea').on('mouseup',function (e) {
      //         $('#hideArea').fadeOut(600);
      //     })
      //
      // })


      this.$smallBox.hover(function () {
        self.$bigBox.show();
        self.$smallBox_mask.show();
        self.setMask();
        $(this).mousemove(function (ev) {
          var oEvent = ev || window.event;
          var offset_pos = {
            left: oEvent.clientX - $(this).offset().left - self.$smallBox_mask.width() / 2,
            top: oEvent.clientY - $(this).offset().top - self.$smallBox_mask.height() / 2 + $(window).scrollTop()
          };

          if (offset_pos.left < 0) {
            offset_pos.left = 0;
          } else if (offset_pos.left > $(this).width() - self.$smallBox_mask.width()) {
            offset_pos.left = $(this).width() - self.$smallBox_mask.width();
          }
          if (offset_pos.top < 0) {
            offset_pos.top = 0;
          } else if (offset_pos.top > $(this).height() - self.$smallBox_mask.height()) {
            offset_pos.top = $(this).height() - self.$smallBox_mask.height();
          }

          self.$smallBox_mask.css(offset_pos);

          // self.moveBigPic(offset_pos.left,offset_pos.top);
            self.moveBigPic()
        });

      }, function () {
        self.$smallBox_mask.hide();
        self.$bigBox.hide();
      });
    },

    constructor: Magnifier
  };

  $.fn.magnifier = function () {
    var magnifier = new Magnifier(this);
    return magnifier.inital();
  };

})(jQuery, window, document);